<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <style>
        .avatar-uploader .el-upload {
            border: 1px dashed #d9d9d9;
            border-radius: 6px;
            cursor: pointer;
            position: relative;
            overflow: hidden;
            margin: 0 auto;
            padding: 0;

        }
        .avatar-uploader .el-upload:hover {
            border-color: #409EFF;
        }
        .avatar-uploader-icon {
            font-size: 28px;
            color: #8c939d;
            width: 178px;
            height: 178px;
            line-height: 178px;
            text-align: center;
        }
        .avatar {
            width: 178px;
            height: 178px;
            display: block;
        }
    </style>

</head>
<body>
<div id="app">
    <div>
        <img  :src="doctorArr[0].headImgURL" class="avatar" style="width: 200px;height: 200px;" style="float: left;">
        <el-button type="primary" @click="getAvatar(doctor.iid)">修改头像</el-button>
    </div>
    <el-descriptions title="医生信息" style="width: 1200px;float: right;margin: -220px  -150px;" v-for="(d,i) in doctorArr">
        <el-descriptions-item label="姓名" >{{d.name}}</el-descriptions-item>
        <el-descriptions-item label="年龄"  >{{d.age}}</el-descriptions-item>
        <el-descriptions-item label="性别" >{{d.sex}}</el-descriptions-item>
        <el-descriptions-item label="手机号" >{{d.telephone}}</el-descriptions-item>
        <el-descriptions-item label="地址" >{{d.address}}</el-descriptions-item>
        <el-descriptions-item label="职称" >{{d.post.pname}}</el-descriptions-item>
        <el-descriptions-item label="科室" >{{d.kes.kname}}</el-descriptions-item>

    </el-descriptions>
    <div style="margin-top: 50px;"v-for="(d,i) in doctorArr">
        <span>医生介绍</span>
        <el-divider></el-divider>
        <span>{{d.resume.resume}}</span>
    </div>
    <div style="margin-top: 50px;"v-for="(d,i) in doctorArr">
        <span>生涯</span>
        <el-divider></el-divider>
        <span>{{d.resume.career}}</span>
    </div>
    <div style="margin-top: 50px;"v-for="(d,i) in doctorArr">
        <span>特长</span>
        <el-divider></el-divider>
        <span>{{d.resume.major}}</span>
    </div>
    <el-button v-for="(d,i) in doctorArr" type="primary" plain @click="updateResume(d.resume.id)">修改简介</el-button>
    <el-button v-if="doctor.iid === '1' " type="primary" plain @click="Return()">返回</el-button>

    <el-dialog title="修改" :visible.sync="dialogTableVisible">
        <el-form >
            <el-form-item label="医生介绍" :label-width="formLabelWidth">
                <el-input   placeholder="请输入内容" v-model="doctorResume.resume" name="resume"></el-input>
            </el-form-item>
            <el-form-item label="生涯" :label-width="formLabelWidth">
                <el-input   placeholder="请输入内容" v-model="doctorResume.career" name="career"></el-input>
            </el-form-item>
            <el-form-item label="特长" :label-width="formLabelWidth">
                <el-input   placeholder="请输入内容" v-model="doctorResume.major" name="major"></el-input>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="dialogTableVisible = false">取 消</el-button>
            <el-button type="primary" @click="updateDoctorResume(doctorResume.id)">确 定</el-button>
        </div>
    </el-dialog>

    <el-dialog  title="更改头像" :visible.sync="dialogFormVisible" width="300px">
        <el-form id="doctorFrom" :model="avatar">
            <el-form-item  >
                <input v-model="avatar.id" name="id" type="text" value="" style="display:none">
            </el-form-item>
            <el-form-item >
                <img  :src="avatar.headImgURL" id="doctorImg" style="width: 200px;height: 200px;">
                <input @change="chengImg()" id="foo"    type="file" name="headImg" />
            </el-form-item>
        </el-form>
        <el-button type="primary" @click="updateAvatar(avatar.id)">提交</el-button>
        <el-button @click="dialogFormVisible=true">取消</el-button>
    </el-dialog>
</div>
<script>
    var id = window.location.href.split("=")[1];
    $.get("/ssm/doctor/doctorsResume/"+id,function (backData) {
        if (backData.code === 2){
            window.location.href="/ssm/doctors/addResume.html?id="+id;
        }else{
            zz.doctorArr = backData.data
        }
        $.get("/ssm/resume/getId/"+id,function (backData) {
            zz.doctor.iid=backData.data
        })
    });
    var zz = new Vue({
        el:"#app",
        data:{
            doctorResume:{},
            imageUrl:'',
            size:'',
            doctorArr:[],
            doctor:{},
            avatar:{},
            dialogFormVisible:false,
            dialogTableVisible:false,
            formLabelWidth: '120px',
        },
        methods:{
            updateDoctorResume(id){
                $.post("/ssm/resume/updateDoctorResume",zz.doctorResume,function (backData) {
                    if(backData.code === 1){
                        zz.$message.success('修改成功');
                        getData(id);
                    }


                })
            },
            updateResume(id){
                $.get("/ssm/resume/getDoctorResume/"+id,function (backData) {
                        zz.doctorResume = backData.data;
                        zz.dialogTableVisible = true
                })
            },
            chengImg(){
                var  r = new FileReader();
                r.readAsDataURL(foo.files[0]);
                r.onload = function () {
                    doctorImg.src = r.result;
                }
            },
            getAvatar(id){
                $.get("/ssm/resume/getAvatar/"+id,function (backData) {
                    zz.avatar=backData.data;
                    zz.dialogFormVisible = true;
                })
            },
            updateAvatar(id){
                var doctorData = new FormData(doctorFrom);

                $.ajax({
                    url: "/ssm/resume/updateAvatar",
                    type: "POST",
                    data: doctorData,
                    processData: false,
                    contentType: false,
                    success: function (backData) {
                        getData(id);
                    }
                });

                zz.dialogFormVisible = false;

                // window.location.reload()
            },
            Return(){
                window.location.href="/ssm/doctors/doctor.html";
            }
        }
    });
    function getData(id) {
        $.get("/ssm/doctor/doctorsResume/"+id,function (backData) {
            zz.doctorArr = backData.data;
            window.location.reload()
        })
    }
</script>
</body>
</html>